<template>
	<view>
		<view class="panel" v-for="(item,index) in selectDatas" :key="index">
			<view class="panel-head">{{item.specName}}：</view>
			<view class="panel-body">
				<view class="container" :class="column">
					<view v-for="(v,i) in item.specValueList" :key="i">
						<view class="item" :class="{ 
						'clickTrue':v.isflag,
						'isdisabled':v.isdisabled
					}" :style="v.isdisabled == true?{'cursor':'not-allowed'}:{'cursor':'pointer'}" :data-i="i" :value="v.valueName"
							@tap="change(item, v, index)">
							{{v.valueName}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var spliter = "\u2299";
	export default {

		props: {
			// 标识名，用于多个组件时区分回调组件
			keyName: {
				type: Number | String,
				default: ''
			},
			selectDatas: {
				type: Array,
				default: () => {
					// console.log('select', this.selectData)
					// return [true, true, true, true]
				}
			},
			res:{
				type:Object
			},
			goodsData:{
				type:Object
			},
			oldValue: {
				type: String
			},
			selectedItem: {
				type: Array,
				default: () => {
					console.log('第三次selectedItem==============', this.selectedItem)
					// return [true, true, true, true]
				}
			},
			skuItems: {
				type: Array
			}
		},
		watch: {
			selectedItem: {
				handler(newName, oldName) {

					// console.log('第三层selectedItem++++++++++++++++++++++++++++++++++++',newName)
					// console.log('oldName',oldName)
				},
				deep: true,
			},
			skuItems: {
				handler(newName, oldName) {
					// console.log('第三层skuItems+++++++++++++///+++++++++++++++++++++++', newName)
					// console.log('oldName', oldName)

				},
				deep: true,
			},
			selectDatas: {
				handler(newName, oldName) {
					// console.log('第三层selectDatasskuItems++++++++++++++++++++++++++++++++++++', newName)
					console.log('selectDatasoldName', oldName)

				},
				deep: true,
			}
		},
		data() {
			return {
				list: [],
				indexs: -1,
				 /*sku属性切换使用 */
				      // skuItems: [],
				      // res: {},
				type: 'radio',
				column: '',
				isDisabled: false,
				copyListData: '',
				copyIndexData: -1,
				// skuflag: false
			};
		},
		mounted() {
			// console.log('keyname', this.keyName)
		},
		methods: {
			/* 切换 */
			change(item, clild, index) {
				console.log('item',item);
				/* 单选框 */
				if (this.type == 'radio') {
					if (clild.isdisabled) {
						return false;
					}
					let str = "";
					// console.log('clild.isflag',clild.isflag)
					// console.log('可点击')
					if (clild.isflag) {
						console.log('可点击4.1', this.selectedItem)
						// console.log('4.333333333333333333', this.skuItems)
						
						this.$util.msg('该商品属性已选，请勿选择相同属性！')
						// 取消选中执行的事件 去除该商品属性
						// clild.isflag = false;
						// this.selectedItem.splice(index, 1, "");
						// str = this.selectedItem.join(spliter);
						// if (str.endsWith(spliter)) {
						// 	str = str.substring(0, str.length - 1);
						// }
					} else {
						// console.log('可点击4.2', this.selectedItem)
						for (var j = 0; j < item.specValueList.length; j++) {
							item.specValueList[j].isflag = false;
						}
						clild.isflag = true;
						// console.log('item.specValueList222222222222222222222222222222',item.specValueList)
						console.log('4.333333333333333333', this.skuItems)
						this.selectedItem.splice(index, 1, clild.valueName);
						str = this.selectedItem.join(spliter);
					}

					let goodsId = "";
					for (let index = 0; index < this.skuItems.length; index++) {
						if (this.skuItems[index].path == str) {
							goodsId = this.skuItems[index].goodsId;
							break;
						}
					}
					console.log('goodsId', goodsId)
					if (goodsId != "") {
						let params = {
							goodsId: goodsId
						};
						if (this.areaId != "") {
							params.areaId = this.areaId;
							params.areaName = this.areaName;
						}
						console.log('返回数组',this.get())
					this.$nextTick(() => {
						this.$emit("change", this.get(), goodsId);
						this.skuflag()
					})
					} else {
						// this.skuflag = !this.skuflag;
						this.skuflag()
					}
					return;
				}
				//复选框
				console.log('?????',this.$props.keyName);
				this.$nextTick(() => {
					this.$emit("change", this.get(), this.$props.keyName);
				});
			},
			    skuflag() {
			      console.log('使用该方法')
			      // 切换图片
			      // this.setGoodsImg(true);
			      // 设置按钮不可选
			      this.isDisabled = true;
			      // 不显示库存
			      // this.goodsData.protocol.remainAmount = "";
			      if(this.isTokenShow || this.isShowPriceUnlogin == '1') {
			        this.goodsPriceStr = this.priceInterval;
			      }
			      this.selectDatas = this.goodsData.skuList;
			      // 更新sku状态
			    //   this.updateStatus();
			
			    },
			trimSpliter(str, spliter) {
				let reLeft = new RegExp("^" + spliter + "+", "g");
				let reRight = new RegExp(spliter + "+$", "g");
				let reSpliter = new RegExp(spliter + "+", "g");
				return str
					.replace(reLeft, "")
					.replace(reRight, "")
					.replace(reSpliter, spliter);
			},
			updateStatus() {
				let selected = this.selectedItem;
				console.log('update', selected)
				let keys = this.selectDatas;
				for (let i = 0; i < keys.length; i++) {
					let key = keys[i];
					let data = key.specValueList;
					let copy = selected.slice();

					for (let j = 0; j < data.length; j++) {
						console.log('update for', data)
						let itemObj = data[j];
						let item = itemObj.valueName;
						if (selected[i] == item) continue;
						copy[i] = item;

						let curr = this.trimSpliter(copy.join(spliter), spliter);
						console.log('this.res[curr]',this.res[curr])
						if (this.res[curr]) {
							itemObj.isdisabled = false;
						} 
						// else {
						// 	itemObj.isdisabled = true;
						// }
					}
				}
			},
			/* 设置值 */
			set(data) {
				console.log('使用的值', data)
				let [type, index] = ['checkbox', -1];
				let column = ['', 'col_1', 'col_2', 'col_3'];
				if (data.type == 'radio') {
					type = 'radio';
					index = data.index >= 0 ? data.index : -1;
				}
				this.column = (data.column in column) ? column[data.column] : '';
				this.type = type;
				console.log('几列', data)
				this.index = index;
				this.list = data.specValueList;
				// this.list = data.list;


				if (data.maxSize > 0 && data.maxFn) {
					this.maxSize = data.maxSize;
					this.maxFn = data.maxFn;
				} else {
					this.maxSize = undefined;
					this.maxFn = undefined;
				}

				// 存储数据
				// this.copyListData = JSON.stringify(data.specValueList);
				this.copyListData = JSON.stringify(data.list);
				this.copyIndexData = data.index === undefined ? -1 : data.index;
			},
			/* 获取值 */
			get() {
				/* 单选框 */
				if (this.type == 'radio') {
					if (this.indexs >= 0) {
						return this.list[this.indexs];
					} else {
						return null;
					}
				}

				let arr = [];
				this.list.forEach((item, index) => {
					if (item.checked == true) {
						arr.push(item);
					}
				});
				return arr.length > 0 ? arr : null;
			},
			/* 全部选中 */
			checkAll() {
				if (this.disabled()) {
					return;
				}
				if (this.type == 'radio') {
					return null;
				}
				this.list.forEach((item, index) => {
					this.$set(this.list[index], "checked", true);
				})
			},
			/* 取消全部选中 */
			cancelAll() {
				if (this.disabled()) {
					return;
				}
				if (this.type == 'radio') {
					this.indexs = -1;
					return null;
				}
				this.list.forEach((item, index) => {
					this.$set(this.list[index], "checked", false);
				})
			},
			/* 反选全部 */
			invertAll() {
				if (this.disabled()) {
					return;
				}
				if (this.type == 'radio') {
					this.indexs = -1;
					return null;
				}
				this.list.forEach((item, index) => {
					this.$set(this.list[index], "checked", item.checked ? false : true);
				})
			},
			/* 重置 */
			reset() {
				this.list = JSON.parse(this.copyListData);
				this.indexs = this.copyIndexData;
			},
			/* 禁用 */
			disabled(flag = undefined) {
				if (flag === undefined) {
					return this.isDisabled;
				}
				this.isDisabled = flag;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.isdisabled {
		cursor: not-allowed;
		background: #c7c7c7 !important;
		color: #909090 !important;
	}
	.clickTrue {
	      // background-image: url("../assets/images/product/checkFirst.png");
	      background-repeat: no-repeat;
	      background-position: right bottom;
	      border: 1px solid rgba(255, 77, 79, 1) !important;
		  &::before {
		  	content: '';
		  	display: block;
		  	width: 20px;
		  	height: 20px;
		  	background-color: #ff0000;
		  	position: absolute;
		  	right: -1px;
		  	bottom: -1px;
		  	z-index: 1;
		  	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		  }
		  
		  &::after {
		  	content: '';
		  	display: block;
		  	width: 3px;
		  	height: 6px;
		  	border-right: #fff solid 2px;
		  	border-bottom: #fff solid 2px;
		  	transform: rotate(25deg);
		  	position: absolute;
		  	right: 3px;
		  	bottom: 3px;
		  	z-index: 2;
		  }
	    }

	.container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		margin-right: -20rpx;
		font-size: 28rpx;
		text-align: center;

		&>view {
			margin-bottom: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
		}

		&.col_1 {
			&>view {
				width: 100%;
			}
		}

		&.col_2 {
			&>view {
				width: 50%;
			}
		}

		&.col_3 {
			&>view {
				width: 33.3333333%;
			}
		}

		.item {
			line-height: 68rpx;
			padding: 0 20rpx;
			border-radius: 20px;
			box-sizing: border-box;
			border: #e5e5e5 solid 1px;
			background-color: #fff;
			color: #333;
			position: relative;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			// 未选中状态下的禁用样式
			&.disabled {
				background-color: #aa00ff;
				color: #aa55ff;
			}

			&.active {
				background-color: #ff0000;
				color: #ffffff;
				border: #ff0000 solid 1px;

				&::before {
					content: '';
					display: block;
					width: 20px;
					height: 20px;
					background-color: #ff0000;
					position: absolute;
					right: -1px;
					bottom: -1px;
					z-index: 1;
					clip-path: polygon(100% 0, 0% 100%, 100% 100%);
				}

				&::after {
					content: '';
					display: block;
					width: 3px;
					height: 6px;
					border-right: #fff solid 2px;
					border-bottom: #fff solid 2px;
					transform: rotate(25deg);
					position: absolute;
					right: 3px;
					bottom: 3px;
					z-index: 2;
				}

				// 选中状态下的禁用样式
				&.disabled {
					background-color: #f1f1f1;
					color: #d8d8d8;
					border: #e5e5e5 solid 1px;

					&::before {
						background-color: #d9d9d9;
					}
				}
			}
		}
	}

	.panel {
		background-color: #fff;
		margin-bottom: 20rpx;
		// padding: 20rpx 20rpx 0 20rpx;

		&-head {
			font-size: 28rpx;
		}

		&-body {
			margin-top: 20rpx;
			padding: 20rpx 0 0 0;
			// border-top: #eee solid 1px;
			overflow: hidden;

			>button {
				display: block;
				float: left;
				margin: 0 20rpx 20rpx 0;
				border: #007aff solid 1px;
				padding: 0 20rpx;
				border-radius: 0;

				&:after {
					display: none;
				}
			}
		}
	}
</style>
